<template>
	<view class="wrapper">
		<!-- 	<!--<view class="title-padding"></view>--> -->
		<!-- 		<view class="headerGd">
			<view class="header">
				<button class="back" @tap="back()"></button>
				商品分类
			</view>
		</view> -->
		<view class="search">
			<input v-model="searchValue" placeholder="输入部门名称" />
			<text @tap="searchGoodsType()">搜索</text>
		</view>
		<view class="goodTypeList">
			<view class="tabTitle">
				<text>序号</text>
				<text>部门编号</text>
				<text>部门名称</text>
				<text>操作</text>
			</view>
			<view class="goodTypeListContainer" :style="{height:bottomListHeight +'px'}">
				<view class="goodTypeItem" v-for="(item,index) in department" :key="index">
					<text>{{index+1}}</text>
					<text>{{item.DepartmentCode}}</text>
					<text>{{item.DepartmentName}}</text>
					<view><button @tap="openModel(1,item)"></button><button @tap="openModel(2,item)"></button></view>
				</view>
			</view>
		</view>
		<view class="flOptions">
			<button @tap="openModel(0)">新增</button>
		</view>
		<view class="Modal_Wrap" v-show="isShowDialog">
			<view class="Model">
				<view class="modelTitle">
					{{addOrChangeTitle}}
				</view>
				<view class="modelContains" v-if="addOrChangeType!=2">
					<text>档案编号</text>
					<input placeholder="输入档案编号" v-model="DepartmentCode" />
				</view>
				<view class="modelContains" v-if="addOrChangeType!=2">
					<text>档案名称</text><input placeholder="输入档案名称" v-model="DepartmentName" />
				</view>
				<view class="modalOptions">
					<view @tap="cancel(0)">取消</view>
					<view @tap="cancel(1,addOrChangeType)">确认</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import * as Api from '@/syApis/syDa/syDa.js'
	export default {
		data() {
			return {
				//输入框的值
				searchValue: "",
				//底部列表滚动的高度
				bottomListHeight: 0,
				//进行操作的标识
				addOrChangeType: 0,
				//进行操作的标题
				addOrChangeTitle: "新增部门档案",
				//商品类别
				goodType: "",
				//弹框的显隐
				isShowDialog: false,
				//输入框的值
				goodTypeVaule: "1111",
				//当前新增或者修改的商品的ID
				NowGoodID: "",
				//部门列表
				department: [{
					bh: "D01",
					TypeName: "总部"
				}],
				//当前商品的名字
				goodTypeName: "",
				DepartmentCode:"",
				DepartmentName:"",
				DepartmentID:""
			}
		},
		created() {
			//获取屏幕高度uni.getSystemInfoSync().statusBarHeight
			var $this = this;
			this.bottomListHeight = uni.getSystemInfoSync().windowHeight - 100 - 50;
			this.Get_DepartmentMessage();
			uni.hideTabBar();
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//关闭弹框
			cancel(state, type) {
				this.isShowDialog = false;
				if (state == 0) {
					this.goodType = "";
				}
				//删除操作
				if (type == 2 && state != 0) {
					this.deleteGoodsType();
				}
				//修改操作
				else if (type == 1 && state != 0) {
					this.changeGoodsType();
				}
				//新增操作
				else if (state != 0) {
					this.addGoodsTypeName();
				}
			},
			//开启弹框
			openModel(type, item) {
				this.isShowDialog = true;
				this.addOrChangeType = type;
				if (type == 0) {
					this.addOrChangeTitle = "新增部门档案";
					this.DepartmentCode = "";
					this.DepartmentName = "";
				} else if (type == 1) {
					this.addOrChangeTitle = "修改部门档案";
					this.DepartmentID = item.DepartmentID;
					this.DepartmentCode = item.DepartmentCode;
					this.DepartmentName = item.DepartmentName;
				} else {
					this.addOrChangeTitle = "确定要删除此档案吗？";
					this.DepartmentID = item.DepartmentID;
				}

			},
			//查询档案
			searchGoodsType() {
                 let filter = "DepartmentName='"+this.searchValue+"'";
				 if(this.searchValue==""){
					 this.Get_DepartmentMessage();
				 }else{
					 this.Get_DepartmentMessage(filter);
				 }
				 
			},
			//删除档案
			deleteGoodsType() {
                 let data = {
					 DepartmentID:this.DepartmentID
				 }
				 var that = this;
				 Api.Delete_DepartmentMessage(data,function(res){
					if(res.state){
						if(res.data.ErrorMsg=="获取登陆信息失败"){
							
						}else if(res.data.ErrorMsg!=""){
							Api.showTip(res.data.ErrorMsg);
						}else{
							Api.showTip("删除成功");
							that.Get_DepartmentMessage();
						}
					}
				 })

			},
			//新增档案
			addGoodsTypeName() {
				    let CreateID = uni.getStorageSync("UserCode");
                    let Save_M_Data_Json = {
						DepartmentCode:this.DepartmentCode,
						DepartmentName:this.DepartmentName,
						CreateID:CreateID
					}
					let data = {
						Save_M_Data_Json:JSON.stringify(Save_M_Data_Json)
					}
					var that = this;
					Api.Add_DepartmentMessage(data,function(res){
						if(res.state){
							if(res.data.ErrorMsg=="获取登陆信息失败"){
								
							}else if(res.data.ErrorMsg!=""){
								Api.showTip(res.data.ErrorMsg);
							}else{
								Api.showTip("新增成功");
								that.Get_DepartmentMessage();
							}
						}
					});
			},
			//修改所选的档案
			changeGoodsType() {
				 let CreateID = uni.getStorageSync("UserCode");
                  let Save_M_Data_Json = {
					  DepartmentID:this.DepartmentID,
					  DepartmentCode:this.DepartmentCode,
					  DepartmentName:this.DepartmentName,
					  CreateID
				  }
				  let data = {
					  Save_M_Data_Json:JSON.stringify(Save_M_Data_Json)
				  }
				  	var that = this;
				  Api.Update_DepartmentMessage(data,function(res){
					  if(res.state){
					  	if(res.data.ErrorMsg=="获取登陆信息失败"){
					  		
					  	}else if(res.data.ErrorMsg!=""){
					  		Api.showTip(res.data.ErrorMsg);
					  	}else{
					  		Api.showTip("修改成功");
					  		that.Get_DepartmentMessage();
					  	}
					  }
				  })
			},
			//获取全部部门
			Get_DepartmentMessage(filter) {
				if (filter === undefined) {
					filter = "";
				}
				let data = {
					Filter: filter,
					BillName:'商品档案'
				}
				var _this = this;
				Api.Get_DepartmentMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							Api.showTip("获取登录信息失败");
							return;
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
							return;
						} else {
						   if(res.data.ResultMsg.length==0){
							   Api.showTip("查无数据");
						   }
							_this.department = res.data.ResultMsg;
							_this.searchValue = "";
						}
					} else {
						Api.showTip("服务器开小差了");
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*图标的大小*/
	$iconWidth:20px;
	$iconHeight:20px;
	$iconBackSize:20px;

	.title-padding {
		height: var(--status-bar-height);
		background: #031ae6;
		box-sizing: content-box;
	}

	button::after {
		border: none;
		padding: 0px;
	}

	body {
		width: 100%;
		height: 100%;
	}

	page {
		width: 100%;
		height: 100%;
	}

	.wrapper {
		width: 100%;
		height: 100%;
	}

	.headerGd {
		width: 100%;
		height: 100upx;
		line-height: 50px;
		background: #031ae6;
		display: table;
		top: var(--status-bar-height);

		.header {
			position: relative;
			text-align: center;
			font-size: 16px;
			color: #FFF;

			.back {
				width: $iconWidth;
				height: $iconHeight;
				background: url(../../static/back.png) no-repeat;
				position: absolute;
				left: 10px;
				top: 15px;
				background-size: $iconBackSize;
			}

		}
	}

	.search {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #030ed9;
		padding-top: 10upx;
		box-sizing: border-box;
		display: flex;
		padding-left: 15upx;
		padding-right: 15upx;

		input {
			flex: 1;
			height: 40px;
			display: inline-block;
			border: 1px solid #FFF;
			color: #999;
			border-radius: 10upx;
			border-top-right-radius: 0upx;
			border-bottom-right-radius: 0upx;
			padding-left: 10upx;
			background: #FFF;

		}

		text {
			display: inline-block;
			width: 120upx;
			height: 40px;
			text-align: center;
			line-height: 40px;
			border-radius: 10upx;
			padding-top: -10upx;
			background: #FFF;
			border-top-left-radius: 0upx;
			border-bottom-left-radius: 0upx;
			border-left: 1upx solid #999;
		}
	}

	.goodTypeList {
		width: 100%;

		.tabTitle {
			width: 100%;
			display: flex;
			flex-direction: row;
			background: #CCCCCC;
			border-bottom: 1px solid #C0C0C0;

			text {

				height: 40px;
				line-height: 40px;
				text-align: center;
				border-right: 1upx solid #FFF;

				&:nth-child(1) {
					width: 120upx;
					text-align: center;
				}
				&:last-child {
					width: 200upx;

					text-align: center;

					button {
						width: 80upx;
						height: 80upx;
						background: url(../../static/delete.png) no-repeat;
						background-size: 80upx;
					}
				}

				&:nth-child(2) {
					flex: 1;
				}

				&:nth-child(3) {
					flex: 1;
				}
			}
		}

		.goodTypeListContainer {
			background: #E7EBED;
			overflow: auto;

			.goodTypeItem {
				width: 100%;
				display: flex;
				flex-direction: row;
				background: #EBEBEB;
				border-bottom: 1px solid #C7C7C7;

				text {
					height: 40px;
					line-height: 40px;
					text-align: center;
					border-right: 1px solid #C7C7C7;
                    
                    &:nth-child(1) {
					 width: 120upx;
					  text-align: center;
                     
				    }
					&:nth-child(2) {
						flex: 1;
						
					}
					
					&:nth-child(3) {
						flex: 1;
					}


				}

				view {
					width: 200upx;
					text-align: center;
					display: flex;
					button {
						width: 20px;
						height: 20px;
						margin-top: 20upx;
						padding: 0upx;

						&:first-child {
							background: url(../../static/changeGood.png) no-repeat;
							background-size: 20px;
						}

						&:last-child {
							background: url(../../static/deleteGoods.png) no-repeat;
							background-size: 20px;
						}

					}
				}
			}
		}

	}

	.flOptions {
		width: 100%;
		height: 54px;
		line-height: 54px;
		display: flex;
		flex-direction: row;
		text-align: center;
		position: fixed;
		bottom: 0upx;
		left: 0upx;

		button {
			flex: 1;
			height: 54px;
			border-radius: 0upx;
			line-height: 54px;
			background: $bb-bg-color;
			color: #FFF;

			&:first-child {
				border-right: 1px solid #FFF;
			}
		}
	}

	.Modal_Wrap {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .2);

		.Model {
			position: absolute;
			background: #FFF;
			top: 50%;
			left: 10%;
			width: 80%;
			margin-top: -250upx;
			z-index: 99999;
			border: 1px solid #ebebeb;
			border-radius: 20upx;
			display: table;

			.modelTitle {
				width: 100%;
				line-height: 80upx;
				height: 80upx;
				text-align: center;
				font-size: 36upx;
				border-bottom: 1px solid #ebebeb;
			}

			.modelContains {
				box-sizing: border-box;
				font-size: 30upx;
				padding: 10upx 20upx;

				input {
					margin: 15upx 10upx;
					height: 38upx !important;
					line-height: 38upx !important;
					padding: 0upx;
					vertical-align: top;
				}

				text {
					height: 100%;
					line-height: 40upx;
					display: block;
				}
			}

			.modalOptions {
				width: 100%;
				height: 70upx;
				line-height: 70upx;
				display: flex;

				view {
					flex: 1;
					text-align: center;
					font-size: 30upx;
					border-top: 1px solid #ebebeb;

					&:first-child {
						border-right: 1px solid #ebebeb;
					}
				}
			}

		}
	}
</style>
